import React from 'react'
import './index.css'

export default function Header({getNameFn}) {
  //输入获取数据
 const getCarHandle = (e)=>{
  //获取表单输入的数据,且是否为空
  const carName = e.target.value.trim();
  // console.log(carName);
  // 判断是否为空
  if(!carName) return alert('请输入完整内容')
  //如果键码不是回车，直接终止代码。
  if(e.keyCode !== 13) return
  //在app封装一个函数让app接收拿到的值
  getNameFn(carName);

  //让输入后表单数据为空
  e.target.value = ''
 }


  return (
    <div className="todo-header">
    <input type="text" onKeyUp={getCarHandle} placeholder="请输入你的任务名称，按回车键确认"/>
  </div>
  )
}
